<template>
  <div>
    <!-- 基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>图文信息</span>
      </div>
      <div class="form-container">
        <el-form ref="thirdForm" :model="thirdForm" :rules="rules" label-width="100px" class="demo-ruleForm" size="small">
          <el-form-item label="宝贝主图" prop="mainPicture">
            <el-form-item>
              <el-row style="display: flex">
                <el-upload
                  :data="{'company_id': company_id}"
                  :show-file-list="false"
                  :on-success="mainImgUpload1"
                  :before-upload="beforeUserImgUpload"
                  :action="userHeadUploadApi"
                  :accept="'image/png,image/gif,image/jpg,image/jpeg'"
                  class="avatar-uploader">
                  <img v-if="mainImgUrl1" :src="mainImgUrl1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <el-upload
                  :data="{'company_id': company_id}"
                  :show-file-list="false"
                  :on-success="mainImgUpload2"
                  :before-upload="beforeUserImgUpload"
                  :action="userHeadUploadApi"
                  :accept="'image/png,image/gif,image/jpg,image/jpeg'"
                  class="avatar-uploader">
                  <img v-if="mainImgUrl2" :src="mainImgUrl2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <el-upload
                  :data="{'company_id': company_id}"
                  :show-file-list="false"
                  :on-success="mainImgUpload3"
                  :before-upload="beforeUserImgUpload"
                  :action="userHeadUploadApi"
                  :accept="'image/png,image/gif,image/jpg,image/jpeg'"
                  class="avatar-uploader">
                  <img v-if="mainImgUrl3" :src="mainImgUrl3" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <el-upload
                  :data="{'company_id': company_id}"
                  :show-file-list="false"
                  :on-success="mainImgUpload4"
                  :before-upload="beforeUserImgUpload"
                  :action="userHeadUploadApi"
                  :accept="'image/png,image/gif,image/jpg,image/jpeg'"
                  class="avatar-uploader">
                  <img v-if="mainImgUrl4" :src="mainImgUrl4" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <el-upload
                  :data="{'company_id': company_id}"
                  :show-file-list="false"
                  :on-success="mainImgUpload5"
                  :before-upload="beforeUserImgUpload"
                  :action="userHeadUploadApi"
                  :accept="'image/png,image/gif,image/jpg,image/jpeg'"
                  class="avatar-uploader">
                  <img v-if="mainImgUrl5" :src="mainImgUrl5" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-row>
              <el-row style="color: #909399;font-size:12px">建议尺寸：800*800像素，你可以拖拽图片调整顺序，最多上传5张；宝贝主图大小不能超过3MB</el-row>
            </el-form-item>
          </el-form-item>
          <el-form-item label="封面" prop="coverPicture">
            <el-upload
              :data="{'company_id': company_id}"
              :show-file-list="false"
              :on-success="coverImgUpload"
              :before-upload="beforeUserImgUpload"
              :action="userHeadUploadApi"
              :accept="'image/png,image/gif,image/jpg,image/jpeg'"
              class="avatar-uploader">
              <img v-if="coverImgUrl" :src="coverImgUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <el-row style="color: #909399;font-size:12px">封面只能上传一张，该图片展示在宝贝列表上，如果不填写则显示主图第一张图片；封面图片大小不能超过3MB</el-row>
          </el-form-item>
          <el-form-item v-permission="['ADMIN', 'COMMODITY_VIDEO']" label="主图视频" prop="videoUrl">
            <el-row>
              <el-col style="width: 150px">
                <el-upload
                  :data="{'company_id': company_id}"
                  :action="userHeadUploadApi"
                  :show-file-list="false"
                  :on-success="handleVideoSuccess"
                  :before-upload="beforeUploadVideo"
                  :on-progress="uploadVideoProcess"
                  :accept="'video/mp4,video/avi,video/wmv,video/mkv,video/flv'"
                  class="avatar-uploader el-upload--text">
                  <video v-if="videoUrl !='' && videoFlag == false" :src="videoUrl" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
                  <i v-else-if="videoUrl =='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"/>
                  <el-progress v-if="videoFlag == true" :percentage="videoUploadPercent" type="circle" style="margin-top:30px;"/>
                </el-upload>
              </el-col>
              <el-col style="width:600px;height: 120px;color:#909399;padding-top:10px;font-size:12px">
                <div>1.尺寸：建议使用1：1或16：9或3:4比例视频</div>
                <div>2.时长：≤60s，建议30秒以内短视频可优先在爱逛街等推荐频道展现</div>
                <div>3.内容：突出宝贝1-2个核心卖点</div>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Cookies from 'js-cookie'
export default {
  mixins: [],
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      company_id: Cookies.get('company_id'), // 附带参数， 公司id
      thirdForm: {
        link_url: [],
        cover_url: '',
        vedio_url: ''
      },
      mainImgUrl1: '',
      mainImgUrl2: '',
      mainImgUrl3: '',
      mainImgUrl4: '',
      mainImgUrl5: '',
      coverImgUrl: '', // 主图封面
      videoUrl: '', // 主图视频
      videoFlag: '', // 视频上传状态
      videoUploadPercent: 0, // 视频上传进度
      fileList: [],
      limitCount: 4,
      rules: {
        mainPicture: [
          { required: true, message: '请上传宝贝主图', trigger: 'blur' }
        ],
        subName: [
          { required: true, message: '请输入副标题', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userHeadUploadApi',
      'albumUploadApi'
    ])
  },
  watch: {
    form(value) {
      this.thirdForm = value
      // 为何一个一个绑定：不清楚为什么直接在页面绑thirdForm对象值，无效，时间有限，故在这里直接赋值绑定
      // 主图
      if (value.link_url && value.link_url.length > 0 && value.link_url[0]) {
        this.mainImgUrl1 = value.link_url[0].url
      }
      if (value.link_url && value.link_url.length > 1 && value.link_url[1]) {
        this.mainImgUrl2 = value.link_url[1].url
      }
      if (value.link_url && value.link_url.length > 2 && value.link_url[2]) {
        this.mainImgUrl3 = value.link_url[2].url
      }
      if (value.link_url && value.link_url.length > 3 && value.link_url[3]) {
        this.mainImgUrl4 = value.link_url[3].url
      }
      if (value.link_url && value.link_url.length > 4 && value.link_url[4]) {
        this.mainImgUrl5 = value.link_url[4].url
      }
      // 封面
      if (value.cover_url && value.cover_url.length > 0) {
        this.coverImgUrl = value.cover_url
      }
      // 主图视频
      if (value.vedio_url && value.vedio_url.length > 0) {
        this.videoUrl = value.vedio_url
      }
    }
  },
  methods: {
    // 给父组件传递收取表单的值
    sendThirdMsg() {
      if (!this.thirdForm.link_url || this.thirdForm.link_url.length === 0) {
        this.thirdForm.result = false
        this.$message({
          message: '请添加主图内容',
          type: 'warning'
        })
      } else {
        this.thirdForm.result = true
      }
      this.$emit('msgEvent', this.thirdForm)
    },
    // 主图1上传成功的回调
    mainImgUpload1(res, file) {
      // 用于回显图片内容，不用oss返回的地址主要是节省流量
      this.mainImgUrl1 = URL.createObjectURL(file.raw)
      this.thirdForm.link_url[0] = { url: res }
    },
    // 主图2上传成功的回调
    mainImgUpload2(res, file) {
      this.mainImgUrl2 = URL.createObjectURL(file.raw)
      this.thirdForm.link_url[1] = { url: res }
    },
    // 主图3上传成功的回调
    mainImgUpload3(res, file) {
      this.mainImgUrl3 = URL.createObjectURL(file.raw)
      this.thirdForm.link_url[2] = { url: res }
    },
    // 主图4上传成功的回调
    mainImgUpload4(res, file) {
      this.mainImgUrl4 = URL.createObjectURL(file.raw)
      this.thirdForm.link_url[3] = { url: res }
    },
    // 主图5上传成功的回调
    mainImgUpload5(res, file) {
      this.mainImgUrl5 = URL.createObjectURL(file.raw)
      this.thirdForm.link_url[4] = { url: res }
    },
    // 封面上传成功的回调
    coverImgUpload(res, file) {
      this.coverImgUrl = URL.createObjectURL(file.raw)
      this.thirdForm.cover_url = res
    },
    // 上传图片之前校验
    beforeUserImgUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 2.86
      if (!isLt3M) {
        this.$message.error('上传图片大小不能超过 3MB!')
      }
      return isLt3M
    },
    // 上传视频成功的回调
    handleVideoSuccess(res, file) { // 获取上传图片地址
      this.videoFlag = false
      this.videoUploadPercent = 0
      if (file.status === 'success') {
        this.videoUrl = res
        this.thirdForm.vedio_url = res
      } else {
        this.$message.error('视频上传失败，请重新上传！')
      }
    },
    // 上传视频之前校验
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB哦!')
        return false
      }
    },
    // 上传进度显示
    uploadVideoProcess(event, file) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.form-container {
  width: 90%;
}
.box-card {
  margin-bottom: 10px;
}
.el-card__body {
  padding: 20px 20px 0 20px!important;
}
.form-container-parameter {
  background: #f3f3f3;
  padding: 20px 20px 0 0;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 10px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    margin-right: 10px;
  }
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 6px;
    margin-right: 10px;
  }
</style>
